<template>
    <div style="margin: 20px;">
        <el-container>           
        <el-header >        
          <span style="font-size:60px">退费</span>
          <el-link type="primary" href="/#/initMain" style="float:right"><b>返回首页</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            <span ><b>患者信息查询</b></span><br/>
            <div>
            <el-form  :model="returnANumForm" :rules="rules" ref="returnANumForm" label-width="60px" class="demo-returnANumForm">  
                <el-row gutter="20">
                    <el-col span="8">            
                <el-form-item label="病历号" prop="patientId" >
                <el-input v-model="returnANumForm.patientId"  placeholder="病历号"></el-input>
                </el-form-item>
                    </el-col>
                    
                <el-button type="primary" @click="submitForm" icon="el-icon-search">搜索</el-button>
                </el-row>
            </el-form>
            </div>
                
                <span ><b>患者信息确认</b></span>
                <table> 
                    <tr>
                        <td>姓名</td>        
                
                        <td><el-input v-model="name"  placeholder="姓名"></el-input></td><td></td>
                        <td>身份证号</td>
                        <td><el-input v-model="personId"  placeholder="身份证号"></el-input></td><td></td>
                        <td>家庭住址</td>
                        <td><el-input v-model="address"  placeholder="家庭住址"></el-input></td>
                    </tr>
                    
                </table>
                
                <!--<el-row gutter="20"> 
                <el-col span="8">         
                姓名：
                <el-input v-model="name"  placeholder="姓名"></el-input>
                </el-col>
                <el-col span="8">
                身份证号：
                <el-input v-model="personId"  placeholder="身份证号"></el-input>
                </el-col >
                <el-col span="8">
                家庭住址：
                <el-input v-model="address"  placeholder="家庭住址"></el-input>
                </el-col>
                </el-row>
                -->
                
                
                <hr/>
                <span ><b>患者消费信息</b></span>
                
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'datetime'}"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      prop="patientId"
                      label="病历号"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="project"
                      label="项目名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="number"
                      label="数量"
                      width="120">
                    </el-table-column>
                   
                    <el-table-column
                      prop="datetime"
                      label="开立时间"
                      sortable
                      width="200">
                      <!--<template slot-scope="scope">{{ scope.row.datetime }}</template>-->
                    </el-table-column>
                    <el-table-column
                      prop="state"
                      label="状态"
                      width="120">
                    </el-table-column>
                    
                  </el-table>
                  <table> 
                    <tr>
                        <td>退费金额</td>        
                
                        <td><el-input v-model="payBack"  placeholder="退费金额"></el-input></td><td></td>
                        <td>退费方式</td>
                        <td><el-select v-model="payType" placeholder="请选择结算类型">
                              <el-option label="现金" value="cash"></el-option>
                              <el-option label="网银" value="online"></el-option>
                            </el-select></td>
                    </tr>
                    
                    <tr>
                      <td></td>
                      <td  align="right">
                      <el-button type="primary" style="float:center" @click="save2" icon="el-icon-upload2">退费</el-button>
                        <span><font color='red'>点击确认后进入发票页</font></span>
                      </td>
                    </tr>
                

                </table>
                

              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
  export default {
    
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
      }

    },
    data() {
      return {
        name:'',
        personId:'',
        address:'',

        payBack:'',
        payType:'',
        


        returnANumForm:{
            patientId:''           
        },
        rules: {
          patientId: [
            { required: true, message: '请输入病历号', trigger: 'blur' },
            { min: 5, max: 9, message: '长度在 5 到 9 个字符', trigger: 'blur' }
          ]
        },
        tableData: [{
          patientId: '000000001',
          name: '王小虎',
          project:'验血',
          price: '30',
          number:'1',
          datetime: '2016-10-2 20:18:30',
          state:'已登记'
        }, {
          patientId: '000000001',
          name: '王小虎',
          project:'心电图',
          price: '120',
          number:'1',
          datetime: '2019-11-2 08:18:30',
          state:'未登记'
        }, {
          patientId: '000000001',
          name: '王小虎',
          project:'感康',
          price: '30',
          number:'1',
          datetime: '2019-11-2 23:18:30',
          state:'已领药'
        },{
          patientId: '000000001',
          name: '王小虎',
          project:'CT',
          price: '150',
          number:'1',
          datetime: '2019-11-2 12:18:30',
          state:'已开立'
        }, {
          patientId: '000000001',
          name: '王小虎',
          project:'阿莫西林胶囊',
          price: '20',
          number:'1',
          datetime: '2019-11-2 13:18:30',
          state:'未领药'
        }
        ]
      }
    }
  }
</script>